<template>
  <div>
    <van-nav-bar
      :title="houseinfo.title"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in houseinfo.houseImg" :key="index">
        <img :src="`http://liufusong.top:8080${item}`" alt="" />
      </van-swipe-item>
    </van-swipe>
    <ul class="info">
      <li>
        <h3 class="title">{{ houseinfo.community }}</h3>
        <span
          class="tag"
          type="success"
          v-for="(tag, index) in houseinfo.tags"
          :key="index"
          >{{ tag }}</span
        >
      </li>
      <li>
        <div class="house-info">
          <div class="msg">
            <h3 class="info-title">{{ houseinfo.price }}/月</h3>
            <p>租金</p>
          </div>
          <div class="msg">
            <h3 class="info-title">{{ houseinfo.roomType }}</h3>
            <p>房型</p>
          </div>
          <div class="msg">
            <h3 class="info-title">{{ houseinfo.size }}平米</h3>
            <p>面积</p>
          </div>
        </div>
      </li>
      <li>
        <div class="leixing">
          <div>装修:<span>精装</span></div>
          <div>
            朝向:<span v-for="item in houseinfo.oriented" :key="item">{{
              item
            }}</span>
          </div>
          <div>
            楼层:<span>{{ houseinfo.floor }}</span>
          </div>
          <div>类型:<span>普通住宅</span></div>
        </div>
      </li>
    </ul>
    <div class="house-detail">
      <div class="house-maptitle">
        <p>小区： <span>天山星城</span></p>
      </div>
      <baidu-map class="map-mask"
      :center="center"
      :zoom="zoom"
      @ready="initMap"
      :scroll-whell-zoom="true"
      >

      </baidu-map>
    </div>

  </div>
</template>

<script>
// 创建位置点
import { houseInfoApi } from '@/api'
export default {
  data () {
    return {
      houseinfo: {},
      center: { // 经纬度
        lng: 0,
        lat: 0
      },
      zoom: 16, // 地图展示级别
      BMap: null, // 百度地图对象
      map: null // 百度地图实例
    }
  },

  // async created () {

  //   console.log(res.data.body)
  // },
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    async initMap ({ BMap, map }) {
      const res = await houseInfoApi({ id: this.$route.params.housecode })
      this.houseinfo = res.data.body
      this.BMap = BMap
      this.map = map
      this.$set(this.center, 'lng', this.houseinfo.coord.longitude)
      this.$set(this.center, 'lat', this.houseinfo.coord.latitude)
      const point = new BMap.Point(this.houseinfo.coord.longitude, this.houseinfo.coord.latitude)
      // const point = new BMap.Point(this.houseinfo.coord.latitude, this.houseinfo.coord.longitude)
      const marker = new BMap.Marker(point) // 创建标注
      map.addOverlay(marker)
    }
  }
}
</script>

<style lang="less" scoped>
.van-swipe-item {
  height: 252px;
  img {
    width: 100%;
  }
}
.info {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 15px;
  list-style: none;
  li {
    padding-bottom: 15px;
    .title {
      width: 345px;
      height: 18.39px;
      font-size: 16px;
      font-weight: 400;
      margin: 16px 0;
    }
    .tag {
      display: inline-block;
      width: 46px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      color: #39becd;
      font-size: 12px;
      margin-right: 5px;
      padding: 4px 5px;
      background-color: #e1f5f8;
    }
    .house-info {
      display: flex;
      justify-content: space-around;
      align-items: center;
      border-top: 1px solid #d2d2d2;
      border-bottom: 1px solid #d2d2d2;
      text-align: center;
      .msg {
        padding: 15px 0;
        .info-title {
          margin: 0;
          color: #fa5741;
          font-size: 18px;
        }
        p {
          margin: 0;
          color: #999;
          font-size: 14px;
        }
      }
    }
    .leixing {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      div {
      flex: 50%;
      height: 26px;
      font-size: 13px;
      color: #999;
      span {
        padding-left: 5px;
        color: #333;
      }
    }
}
  }
}
// 小区
.house-detail{
  .house-maptitle{
    height: 44px;
    margin: 0 11.25px;
    color: #666;
    font-size: 14px;
    span{
      color: #333;
    }
  }
  .map-mask{
    width: 100%;
    height: 145px;
  }
}

</style>
